/* Mapboxgl Geocoder */
/* Basics */
.mapboxgl-ctrl-geocoder,
.mapboxgl-ctrl-geocoder *,
.mapboxgl-ctrl-geocoder *:after,
.mapboxgl-ctrl-geocoder *:before {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
.mapboxgl-ctrl-geocoder {
    font:15px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    position:relative;
    background-color:white;
    width:calc(100% - 360px);;
    min-width:calc(100% - 40px);;
    max-width:calc(100% - 40px);;
    margin-left:40px;
    border-radius:0 0 3px 0;
}
.mapbox-directions-origin .mapboxgl-ctrl-geocoder {
    border-radius:0 3px 0 0;
}

.mapboxgl-ctrl-geocoder input[type='text'] {
    font-size:12px;
    width:100%;
    border:0;
    background-color:transparent;
    height:40px;
    margin:0;
    color:rgba(0,0,0,.5);
    padding:10px 40px 10px 10px;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
}
.mapbox-directions-origin input[type='text'] {
    box-shadow:0 1px 0 0 #ddd;
    position:relative;
    z-index:1;
}
.mapboxgl-ctrl-geocoder input:focus {
    color:rgba(0,0,0,.75);
    outline:0;
    outline:thin dotted\8;
}

.mapboxgl-ctrl-geocoder .geocoder-icon-search {
    position:absolute;
    top:10px;
    left:10px;
}
.mapboxgl-ctrl-geocoder button {
    padding:0;
    margin:0;
    background-color:#fff;
    border:none;
    cursor:pointer;
}
.mapboxgl-ctrl-geocoder .geocoder-pin-right * {
    background-color:#fff;
    z-index:2;
    position:absolute;
    right:10px;
    top:10px;
    display:none;
}
.mapboxgl-ctrl-geocoder .geocoder-pin-right *.active { display:block; }

.mapboxgl-ctrl-geocoder,
.mapboxgl-ctrl-geocoder ul {
    box-shadow:none;
}

/* Suggestions */
.mapboxgl-ctrl-geocoder ul {
    background-color:#fff;
    border-radius: 0 0 3px 3px;
    left:0;
    list-style:none;
    margin:0;
    padding:0;
    position:absolute;
    width:100%;
    top:100%;
    z-index:1000;
    overflow:hidden;
    font-size:12px;
}
.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-geocoder ul,
.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-geocoder ul {
    top:auto;
    bottom:100%;
}
.mapboxgl-ctrl-geocoder ul > li > a {
    clear:both;
    cursor:default;
    display:block;
    padding:5px 10px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    border-bottom:1px solid rgba(0,0,0,0.1);
}
.mapboxgl-ctrl-geocoder ul > li:last-child > a { border-bottom:none; }
.mapboxgl-ctrl-geocoder ul > li.active > a,
.mapboxgl-ctrl-geocoder ul > li > a:hover {
    background-color:#eee;
    text-decoration:none;
    cursor:pointer;
}

@-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }
@-moz-keyframes rotate { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } }
@-ms-keyframes rotate { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } }
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* icons */
.geocoder-icon {
    display:inline-block;
    width:20px;
    height:20px;
    vertical-align:middle;
    speak:none;
    background-repeat:no-repeat;
}
.geocoder-icon-search {
    display:none;
}
.geocoder-icon-close {
    background-image:url();
}
.geocoder-icon-loading {
    background-image:url();
    -webkit-animation: rotate 400ms linear infinite;
    -moz-animation: rotate 400ms linear infinite;
    -ms-animation: rotate 400ms linear infinite;
    animation: rotate 400ms linear infinite;
}

/* Basics */
.mapboxgl-ctrl-directions {
    width: 33.33333%;
    min-width: 300px;
    max-width: 300px;
}
.mapbox-directions-component {
    position: relative;
}
.mapbox-directions-component,
.mapbox-directions-component *,
.mapbox-directions-component *:after,
.mapbox-directions-component *:before {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
.mapbox-directions-component-keyline {
    box-shadow:0 0 0 2px rgba(0,0,0,0.1);
    border-radius:3px;
}

.directions-control {
    font:15px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
}

/* Layout containers */
.directions-control {
    width:100%;
    z-index:1;
}
.directions-control.directions-control-directions {
    background:rgba(0,0,0,0.75);
    margin: 7px 0 0;
    color:#fff;
    top:0;
    right:0;
    bottom:0;
    overflow:auto;
    overflow-x:hidden;
}
.directions-control.directions-control-inputs {
    top:10px;
    left:10px;
}

/* Inputs */
.mapbox-directions-origin,
.mapbox-directions-destination {
    position:relative;
}

.mapbox-form-label {
    position:absolute;
    top:0;left:0;
    background:#8a8acb;
    color:#fff;
    padding:0;
    width:40px;
    height:40px;
    text-align:center;
    line-height:38px;
    border-radius:0 0 0 3px;
}
.mapbox-form-label .directions-icon {
    background-position: center;
    width: 40px;
    height: 40px;
}
.mapbox-directions-origin .mapbox-form-label {
    background-color:#3bb2d0;
    border-radius:3px 0 0 0;
    box-shadow:0 1px 0 0 rgba(0,0,0,0.1);
    z-index:1;
}

.directions-reverse {
    position:absolute;
    z-index:10;
    background:white;
    left:40px;
    top:30px;
    cursor:pointer;
}

.mapbox-directions-inputs button {
    padding:0;
    margin:0;
    background-color:#fff;
    border:none;
    cursor:pointer;
}
.mapbox-directions-inputs .directions-pin-right * {
    background-color:#fff;
    z-index:2;
    position:absolute;
    right:10px;
    top:10px;
    display:none;
}
.mapbox-directions-inputs .directions-pin-right *.active { display:block; }

.mapbox-directions-profile {
    background:#fff;
    margin:7px 0 0;
    padding:2px;
    border-radius:15px;
    vertical-align:middle;
}
.mapbox-directions-profile label {
    cursor:pointer;
    vertical-align:top;
    display:block;
    border-radius:16px;
    padding:3px 5px;
    font-size:12px;
    color:rgba(0,0,0,.5);
    line-height:20px;
    text-align:center;
    width: 25%;
    float:left;
}
.mapbox-directions-profile label:hover {
    color:rgba(0,0,0,.75);
}
.mapbox-directions-profile input[type=radio] {
    display:none;
}
.mapbox-directions-profile input[type=radio]:checked + label:hover,
.mapbox-directions-profile input[type=radio]:checked + label {
    background:#eee;
    color:rgba(0,0,0,.75);
}

/* Routes */
.mapbox-directions-routes ul {
    list-style:none;
    margin:0;
    padding:10px 10px 0 10px;
    border-bottom:1px solid rgba(255,255,255,.25);
}

.mapbox-directions-routes li {
    font-size:12px;
    padding:10px 10px 10px 80px;
    display:block;
    position:relative;
    cursor:pointer;
    color:rgba(255,255,255,.5);
    min-height:60px;
}

.mapbox-directions-routes li:hover,
.mapbox-directions-routes .mapbox-directions-route-active {
    color:white;
}

.mapbox-directions-route-heading {
    position:absolute;
    left:10px;
    top:10px;
}

/* Route Summary */
.mapbox-directions-route-summary {
    position: relative;
    z-index:1;
    width:100%;
    background-color:rgba(0,0,0,0.75);
    color:#fff;
    padding:5px 10px;
    font-size:15px;
    line-height:28px;
}
.mapbox-directions-route-summary + .mapbox-directions-instructions {
}
.mapbox-directions-route-summary h1 {
    font-weight:500;
    margin:0;
    display:inline;
    font-size:inherit;
    line-height:inherit;
}
.mapbox-directions-route-summary span {
    color:rgba(255,255,255,0.5);
    margin:0 5px;
}

/* Alt route selection */
.mapbox-directions-instructions {
    overflow: scroll;
}
.mapbox-directions-instructions-wrapper {
    max-height: 50vh;
}
.mapbox-directions-routes {
    margin-left: 5px;
    font-size:12px;
    float: right;
}
.mapbox-directions-routes input[type=radio] { display: none;}
.mapbox-directions-routes input[type=radio]:not(:checked) + .button:before { width: 0;}
.mapbox-directions-routes input[type=radio] + label {
    background-color:rgba(255,255,255,0.10);
    float:left;
    padding:0 10px;
    cursor:pointer;
}
.mapbox-directions-routes input[type=radio] + label:hover,
.mapbox-directions-routes input[type=radio]:checked + label {
    background-color:rgba(255,255,255,0.25);
}

/* Instructions */
.mapbox-directions-instructions .directions-icon {
    position:absolute;
    left:12px;
    top:20px;
    margin:auto;
}
.mapbox-directions-instructions .directions-icon:before {
    vertical-align:top;
}

.mapbox-directions-error {
    padding:20px;
    font-size:20px;
    line-height:25px;
}
.mapbox-directions-step-distance {
    color:rgba(255,255,255,.5);
    position:absolute;
    padding:5px 10px;
    font-size:12px;
    left:30px;
    bottom:-10px;
}
.mapbox-directions-steps {
    position:relative;
    list-style:none;
    margin:0;
    padding:0;
}
.mapbox-directions-step {
    position:relative;
    color:rgba(255,255,255,.75);
    cursor:pointer;
    padding:20px 20px 20px 40px;
    font-size:14px;
    line-height:18px;
    font-weight: 300;
    letter-spacing:0.1em;
}
.mapbox-directions-step * { pointer-events:none; }
.mapbox-directions-step:hover {
    color:white;
}
.mapbox-directions-step:after {
    content:'';
    position:absolute;
    top:45px;
    bottom:-10px;
    border-left:2px dotted rgba(255,255,255,.2);
    left:20px;
}
.mapbox-directions-step:last-child:after,
.mapbox-directions-step:last-child .mapbox-directions-step-distance {
    display:none;
}

.mapbox-marker-drag-icon {
    display:block;
    background-color:#444;
    border-radius:50%;
    box-shadow:0 0 5px 0 rgba(0,0,0,0.5);
}
.mapbox-marker-drag-icon-step {
    background-color:#3BB2D0;
}

.mapbox-directions-clearfix:after {
    content:'';
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}

/* Mobile */
@media only screen and (max-width:640px) {

    /* Containers */
    .directions-control.directions-control { width:100%; max-width:100%; }

    /* Input container */
    .directions-control.directions-control-inputs { top:0;left:0; }
    .mapbox-directions-profile { margin:10px; }

    /* Instructions container */
    .mapbox-directions-routes { float:right; margin-right:10px; }
    .directions-control.directions-control-directions { top:auto; max-height:40%; }
    .mapbox-directions-multiple { min-height:50px; }

}

@-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }
@-moz-keyframes rotate { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } }
@-ms-keyframes rotate { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } }
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* icons */
.directions-icon {
    display:inline-block;
    width:20px;
    height:20px;
    vertical-align:middle;
    speak:none;
    background-repeat:no-repeat;
}
.directions-icon-arrive {
    background-image:url();
}
.directions-icon-slight-left {
    background-image:url();
}
.directions-icon-slight-right {
    background-image:url();
}
.directions-icon-straight {
    background-image:url();
}
.directions-icon-depart {
    background-image:url();
}
.directions-icon-roundabout {
    background-image:url();
}
.directions-icon-error {
    background-image:url();
}
.directions-icon-reverse {
    background-image:url();
}
.directions-icon-sharp-left {
    background-image:url();
}
.directions-icon-sharp-right {
    background-image:url();
}
.directions-icon-left {
    background-image:url();
}
.directions-icon-right {
    background-image:url();
}
.directions-icon-u-turn {
    background-image:url();
}
.directions-icon-waypoint {
    background-image:url();
}